<!-- 组件使用
数据输入:
  value  string 当前选择
  options 数组  [{label:'',value:''}]
  tooltip bool  悬浮是否提示
  disabled bool 是否使用
  emptyLabel string 未选择显示
  函数 onSelect
-->
<template>
  <div>
    <n-dropdown trigger="hover"  :options="props.options" @select="handleSelect" :show-arrow="true"
                :render-option="renderOption">
      <n-button secondary :type="label?'primary':'default'" size="large" style="margin-right: 10px"
                :disabled="props.disabled">
        <slot name="icon"/>
        <n-ellipsis style="margin-left: 5px">
          {{ label || props.emptyLabel }}
        </n-ellipsis>
      </n-button>
    </n-dropdown>
  </div>
</template>

<script setup lang="ts">

import {DropdownGroupOption, DropdownOption, NTooltip} from "naive-ui";
import {h, ref, VNode} from "vue";

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  options: {
    type: Array,
    default: [],
  },
  tooltip: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  emptyLabel: {
    type: String,
    default: ''
  }
})
const label = ref('')
const emits = defineEmits(['update:value', 'onSelect'])
const renderOption = ({node, option}: { node: VNode, option: DropdownOption | DropdownGroupOption }) => {
  return h(NTooltip, {keepAliveOnHover: false, style: {width: 'max-content'}}, {
    trigger: () => [node],
    default: () => option.description || option.label
  })
}
const handleSelect = (key: any, option: any) => {
  label.value = option.label
  if (option.value === '') label.value = ''
  emits('update:value', option.value)
  emits('onSelect')
}


</script>

<style scoped>

</style>
